<template>
  <!--地图-->
  <BaseDataLayerMap :map="map" :selectFeatureProperties="selectFeatureProperties" :clickCoordinate="clickCoordinate"
      @showBaseDataDetailId="showBaseDataDetailId"
      :showHideTextLayerBool="showHideTextLayerBool"
      :rkgwLegendSelectData="rkgwLegendSelectData"
      :xzqhLayerBool="xzqhLayerBool" :xzqhAllData="xzqhAllData"
      :dxdmGcLayerBool="dxdmGcLayerBool" :dxdmGcAllData="dxdmGcAllData"
      :dxdmPdLayerBool="dxdmPdLayerBool" :dxdmPdAllData="dxdmPdAllData"
      :rkgwLayerBool="rkgwLayerBool" :rkgwAllData="rkgwAllData"
      :jtDlLayerBool="jtDlLayerBool" :jtDlAllData="jtDlAllData"
      :jtJcLayerBool="jtJcLayerBool" :jtJcAllData="jtJcAllData"
      :skLayerBool="skLayerBool" :skAllData="skAllData"
      :schoolLayerBool="schoolLayerBool" :schoolAllData="schoolAllData"
      :dzzhLayerBool="dzzhLayerBool" :dzzhAllData="dzzhAllData"
      :dcLayerBool="dcLayerBool" :dcAllData="dcAllData"
      :csWhqyLayerBool="csWhqyLayerBool" :csWhqyAllData="csWhqyAllData"
      :csJyzLayerBool="csJyzLayerBool" :csJyzAllData="csJyzAllData"
      :yjbncsLayerBool="yjbncsLayerBool" :yjbncsAllData="yjbncsAllData"
      :hospitalLayerBool="hospitalLayerBool" :hospitalAllData="hospitalAllData"
      :fwkznlLayerBool="fwkznlLayerBool" :fwkznlAllData="fwkznlAllData"
      :slopeLegendData="slopeLegendData"
      :elevationLegendData="elevationLegendData"
  ></BaseDataLayerMap>
  <!--基础数据图层选择-->
  <div v-if="showHideBaseDataLayerDivBool==true" class="new-layerSelectDiv" style="top:20px;">
    <el-cascader v-model="baseDataLayerSelectData" placeholder="请选择图层"
                 :options="baseDataLayerOptions" :props="baseDataLayerProps" @change="chooseBaseDataLayers"
                 separator="," collapse-tags collapse-tags-tooltip clearable></el-cascader>
  </div>
  <!--图层图例-->
  <div class="new-layerLegendDiv" v-if="showHideBaseDataLayerDivBool==true">
    <p @click="showHideLegendDiv">
      <template v-if="showHideLegendDivBool">
        <img title="打开图例" src="@/assets/map/image/newImage/legend.png"><br/><span style="color:#3a385e;">图例</span>
      </template>
      <template v-else>
        <img title="关闭图例" src="@/assets/map/image/newImage/legend.png"><br/><span style="color:var(--el-color-primary)">图例</span>
      </template>
    </p>
    <p class="new-layerLengendDiv-split"></p>
    <p @click="showHideTextLayer">
      <template v-if="showHideTextLayerBool==false">
        <img title="显示文字" src="@/assets/map/image/newImage/legend.png"><br/><span style="color:#3a385e;">文字</span>
      </template>
      <template v-else>
        <img title="隐藏文字" src="@/assets/map/image/newImage/legend.png"><br/><span style="color:var(--el-color-primary)">文字</span>
      </template>
    </p>
  </div>
  <!--基础数据图例-->
  <div v-if="showHideLegendDivBool==false" class="new-legendDiv">
    <div style="text-align: center;">
      <span style="font-size: 14px;font-weight: bold;color: rgb(16, 124, 229);">图例</span>
    </div>
    <div v-if="xzqhLayerBool">
      <div><div style="border-color:rgb(5 5 233);" class="new-legendDiv-polygon"></div></div>
      <span>行政区划</span>
    </div>
    <div v-if="dxdmGcLayerBool" @mouseover="elevationLegendMouseOver">
      <div><div style="border-color:gray;" class="new-legendDiv-polygon"></div></div>
      <span>地形地貌（高程）</span>
    </div>
    <div v-if="dxdmPdLayerBool" @mouseover="slopeLegendMouseOver">
      <div><div style="border-color:gray;" class="new-legendDiv-polygon"></div></div>
      <span>地形地貌（坡度）</span>
    </div>
    <div v-if="rkgwLayerBool" @mouseover="rkgwLegendMouseOver">
      <div><div style="border-color:orange;" class="new-legendDiv-polygon"></div></div>
      <span>人口建筑物经济公里格网</span>
    </div>
    <div v-if="jtDlLayerBool">
      <div><div style="background:black;" class="new-legendDiv-line"></div></div>
      <span>交通（道路）</span>
    </div>
    <div v-if="jtJcLayerBool">
      <div><div style="background:green;" class="new-legendDiv-point"></div></div>
      <span>交通（机场）</span>
    </div>
    <div v-if="skLayerBool">
      <div><div style="background:blue;" class="new-legendDiv-point"></div></div>
      <span>水库</span>
    </div>
    <div v-if="schoolLayerBool">
      <div><div style="background:blue;" class="new-legendDiv-point"></div></div>
      <span>学校</span>
    </div>
    <div v-if="dzzhLayerBool">
      <div><div style="background:red;" class="new-legendDiv-point"></div></div>
      <span>地质灾害</span>
    </div>
    <div v-if="dcLayerBool">
      <div><div style="background:red;" class="new-legendDiv-line"></div></div>
      <span>断层</span>
    </div>
    <div v-if="csWhqyLayerBool">
      <div><div style="background:purple;" class="new-legendDiv-point"></div></div>
      <span>次生灾害危险源（危化企业）</span>
    </div>
    <div v-if="csJyzLayerBool">
      <div><div style="background:deeppink;" class="new-legendDiv-point"></div></div>
      <span>次生灾害危险源（加油站）</span>
    </div>
    <div v-if="yjbncsLayerBool">
      <div><div style="background:hotpink;" class="new-legendDiv-point"></div></div>
      <span>应急避难场所</span>
    </div>
    <div v-if="hospitalLayerBool">
      <div><div style="background:brown;" class="new-legendDiv-point"></div></div>
      <span>医院</span>
    </div>
    <div v-if="fwkznlLayerBool">
      <div><div style="border-color:lightcoral;" class="new-legendDiv-polygon"></div></div>
      <span>房屋抗震能力分区图</span>
    </div>
  </div>
  <!--人口建筑物经济公里格网图例-->
  <div v-if="rkgwLegendBool==true" class="new-rkgwLegendDiv">
    <div style="text-align: center;">
      <span style="font-size: 14px;font-weight: bold;color: rgb(16, 124, 229);">人口建筑物经济公里格网图例设置</span>
    </div>
    <el-radio-group v-model="rkgwLegendRadio" @change="rkgwLegendRadioSelect" style="height: 27px;">
      <el-radio label="1">人口</el-radio>
      <el-radio label="2">建筑物</el-radio>
      <el-radio label="3">经济</el-radio>
    </el-radio-group>
    <template v-if="rkgwLegendRadio=='1'">
      <div style="text-align: center;height: 40px;">
        <span style="font-size: 14px;font-weight: bold;color: rgb(16, 124, 229);">人口公里格网图例<br/>（单位：人/平方公里）</span>
      </div>
      <template v-for="item in rkgwLegendData1">
        <div>
          <div><div style="border-color:orange;" :style="{'background-color': item.color}" class="new-legendDiv-polygon"></div></div>
          <span>{{ item.name }}</span>
        </div>
      </template>
    </template>
    <template v-if="rkgwLegendRadio=='2'">
      <div style="text-align: center;height: 40px;">
        <span style="font-size: 14px;font-weight: bold;color: rgb(16, 124, 229);">建筑物公里格网图例<br/>（单位：平方米/平方公里）</span>
      </div>
      <template v-for="item in rkgwLegendData2">
        <div>
          <div><div style="border-color:orange;" :style="{'background-color': item.color}" class="new-legendDiv-polygon"></div></div>
          <span>{{ item.name }}</span>
        </div>
      </template>
    </template>
    <template v-if="rkgwLegendRadio=='3'">
      <div style="text-align: center;height: 40px;">
        <span style="font-size: 14px;font-weight: bold;color: rgb(16, 124, 229);">经济公里格网图例<br/>（单位：万元/平方公里）</span>
      </div>
      <template v-for="item in rkgwLegendData3">
        <div>
          <div><div style="border-color:orange;" :style="{'background-color': item.color}" class="new-legendDiv-polygon"></div></div>
          <span>{{ item.name }}</span>
        </div>
      </template>
    </template>
  </div>
  <!--高程图例-->
  <div v-if="elevationLegendBool==true" class="new-rkgwLegendDiv">
    <div style="text-align: center;height: 40px;">
      <span style="font-size: 14px;font-weight: bold;color: rgb(16, 124, 229);">高程图例<br/>（单位：米）</span>
    </div>
    <template v-for="item in elevationLegendData">
      <div>
        <div><div :style="{'background-color': item.color,'border-color': item.color}" class="new-legendDiv-polygon"></div></div>
        <span>{{ item.name }}</span>
      </div>
    </template>
  </div>
  <!--坡度图例-->
  <div v-if="slopeLegendBool==true" class="new-rkgwLegendDiv">
    <div style="text-align: center;height: 40px;">
      <span style="font-size: 14px;font-weight: bold;color: rgb(16, 124, 229);">坡度图例<br/>（单位：度）</span>
    </div>
    <template v-for="item in slopeLegendData">
      <div>
        <div><div :style="{'background-color': item.color,'border-color': item.color}" class="new-legendDiv-polygon"></div></div>
        <span>{{ item.name }}</span>
      </div>
    </template>
  </div>
  <!--基础数据下方查看详情面板-->
  <div v-if="baseDataDetailTable" class="new-queryResultDiv">
    <div class="new-queryTableBtn">
      <el-button @click="closeBaseDataDetailResultDiv" type="primary">关闭</el-button>
      <span class="new-queryTableSpan">{{ selectType }}</span>
    </div>
    <div class="new-queryTableDiv">
      <!--行政区划-->
      <el-table v-if="selectId!=null && selectType=='行政区划'" ref="multipleTable"
                :data="selectDataResult" tooltip-effect="dark" height="150px"
                :header-cell-style="{textAlign:'center'}" :cell-style="{textAlign:'center'}">
        <el-table-column property="province" label="省" width="220"></el-table-column>
        <el-table-column property="city" label="市" width="220"></el-table-column>
        <el-table-column property="county" label="区（县）" width="220"></el-table-column>
        <el-table-column property="street" label="街道、乡镇" width="280"></el-table-column>
        <el-table-column property="village" label="村、社区" width="280"></el-table-column>
      </el-table>
      <!--人口建筑物经济公里格网-->
      <el-table v-if="selectId!=null && selectType=='人口建筑物经济公里格网'" ref="multipleTable"
                :data="selectDataResult" tooltip-effect="dark" height="150px"
                :header-cell-style="{textAlign:'center'}" :cell-style="{textAlign:'center'}">
        <el-table-column property="province" label="省" width="160"></el-table-column>
        <el-table-column property="city" label="市" width="160"></el-table-column>
        <el-table-column property="county" label="区（县）" width="160"></el-table-column>
        <el-table-column property="town" label="乡镇" width="160"></el-table-column>
        <!--<el-table-column property="id" label="Id" width="220"></el-table-column>-->
        <el-table-column property="population" label="人口（人）" width="200"></el-table-column>
        <el-table-column property="coveredarea" label="建筑面积（平方米）" width="200"></el-table-column>
        <el-table-column property="gdp" label="GDP（万元）" width="200"></el-table-column>
        <el-table-column property="townorcontry" label="城镇/农村" width="150"></el-table-column>
        <el-table-column property="jglxGcjz" label="高层建筑占比（%）" width="160"></el-table-column>
        <el-table-column property="jglxGjg" label="钢结构占比（%）" width="160"></el-table-column>
        <el-table-column property="jglxDcgjhntjg" label="多层钢筋混凝土结构占比（%）" width="220"></el-table-column>
        <el-table-column property="jglxZhjg" label="砖混结构占比（%）" width="160"></el-table-column>
        <el-table-column property="jglxZmjg" label="砖木结构占比（%）" width="160"></el-table-column>
        <el-table-column property="jglxTjg" label="土结构占比（%）" width="160"></el-table-column>
        <el-table-column property="jglxMjg" label="木结构占比（%）" width="160"></el-table-column>
        <el-table-column property="jglxSjg" label="石结构占比（%）" width="160"></el-table-column>
        <el-table-column property="jglxQtjg" label="其他结构占比（%）" width="160"></el-table-column>
        <el-table-column property="zzfwzb" label="住宅房屋占比（%）" width="160"></el-table-column>
      </el-table>
      <!--交通（道路）-->
      <el-table v-if="selectId!=null && selectType=='交通（道路）'" ref="multipleTable"
                :data="selectDataResult" tooltip-effect="dark" height="150px"
                :header-cell-style="{textAlign:'center'}" :cell-style="{textAlign:'center'}">
        <el-table-column property="province" label="省" width="220"></el-table-column>
        <el-table-column property="city" label="市" width="220"></el-table-column>
        <el-table-column property="county" label="区（县）" width="220"></el-table-column>
        <!--<el-table-column property="roadId" label="Id" width="220"></el-table-column>-->
        <el-table-column property="roadName" label="名称" width="350"></el-table-column>
        <el-table-column property="roadType" label="类型" width="220"></el-table-column>
      </el-table>
      <!--交通（机场）-->
      <el-table v-if="selectId!=null && selectType=='交通（机场）'" ref="multipleTable"
                :data="selectDataResult" tooltip-effect="dark" height="150px"
                :header-cell-style="{textAlign:'center'}" :cell-style="{textAlign:'center'}">
        <el-table-column property="province" label="省" width="210"></el-table-column>
        <el-table-column property="city" label="市" width="210"></el-table-column>
        <el-table-column property="county" label="区（县）" width="210"></el-table-column>
        <!--<el-table-column property="airportId" label="Id" width="220"></el-table-column>-->
        <el-table-column property="airportLongitude" label="经度" width="200"></el-table-column>
        <el-table-column property="airportLatitude" label="纬度" width="200"></el-table-column>
        <el-table-column property="airportName" label="名称" width="200"></el-table-column>
      </el-table>
      <!--水库-->
      <el-table v-if="selectId!=null && selectType=='水库'" ref="multipleTable"
                :data="selectDataResult" tooltip-effect="dark" height="150px"
                :header-cell-style="{textAlign:'center'}" :cell-style="{textAlign:'center'}">
        <el-table-column property="province" label="省" width="160"></el-table-column>
        <el-table-column property="city" label="市" width="160"></el-table-column>
        <el-table-column property="county" label="区（县）" width="160"></el-table-column>
        <!--<el-table-column property="resId" label="Id" width="220"></el-table-column>-->
        <el-table-column property="resLongitude" label="经度" width="200"></el-table-column>
        <el-table-column property="resLatitude" label="纬度" width="200"></el-table-column>
        <el-table-column property="resName" label="名称" width="200"></el-table-column>
        <el-table-column property="resScale" label="规模" width="200"></el-table-column>
        <el-table-column property="resCapacity" label="库容量（万立方米）" width="200"></el-table-column>
        <el-table-column property="resResultType" label="结构类型" width="200"></el-table-column>
        <el-table-column property="resTime" label="建造年代" width="200"></el-table-column>
      </el-table>
      <!--学校-->
      <el-table v-if="selectId!=null && selectType=='学校'" ref="multipleTable"
                :data="selectDataResult" tooltip-effect="dark" height="150px"
                :header-cell-style="{textAlign:'center'}" :cell-style="{textAlign:'center'}">
        <el-table-column property="province" label="省" width="160"></el-table-column>
        <el-table-column property="city" label="市" width="160"></el-table-column>
        <el-table-column property="county" label="区（县）" width="160"></el-table-column>
        <!--<el-table-column property="schId" label="Id" width="160"></el-table-column>-->
        <el-table-column property="schReslongitude" label="经度" width="160"></el-table-column>
        <el-table-column property="schReslatitude" label="纬度" width="160"></el-table-column>
        <el-table-column property="schName" label="名称" width="160"></el-table-column>
        <el-table-column property="schType" label="类型" width="160"></el-table-column>
        <el-table-column property="schStuNum" label="学生人数" width="160"></el-table-column>
        <el-table-column property="schIsboarding" label="是否寄宿学校" width="160"></el-table-column>
      </el-table>
      <!--地质灾害-->
      <el-table v-if="selectId!=null && selectType=='地质灾害'" ref="multipleTable"
                :data="selectDataResult" tooltip-effect="dark" height="150px"
                :header-cell-style="{textAlign:'center'}" :cell-style="{textAlign:'center'}">
        <el-table-column property="province" label="省" width="160"></el-table-column>
        <el-table-column property="city" label="市" width="160"></el-table-column>
        <el-table-column property="county" label="区（县）" width="160"></el-table-column>
        <!--<el-table-column property="dgdId" label="Id" width="220"></el-table-column>-->
        <el-table-column property="dgdReslongitude" label="经度" width="160"></el-table-column>
        <el-table-column property="dgdReslatitude" label="纬度" width="160"></el-table-column>
        <el-table-column property="dgdName" label="名称" width="200"></el-table-column>
        <el-table-column property="dgdDisasterType" label="灾害类型" width="200"></el-table-column>
        <el-table-column property="dgdImpactPeoNum" label="影响人口数量" width="200"></el-table-column>
        <el-table-column property="dgdImpactHouseNum" label="影响房屋数量" width="200"></el-table-column>
        <el-table-column property="dgdStability" label="稳定性" width="200"></el-table-column>
        <el-table-column property="dgdDangerLevel" label="危险等级" width="200"></el-table-column>
      </el-table>
      <!--断层-->
      <el-table v-if="selectId!=null && selectType=='断层'" ref="multipleTable"
                :data="selectDataResult" tooltip-effect="dark" height="150px"
                :header-cell-style="{textAlign:'center'}" :cell-style="{textAlign:'center'}">
        <el-table-column property="province" label="省" width="220"></el-table-column>
        <el-table-column property="city" label="市" width="220"></el-table-column>
        <el-table-column property="county" label="区（县）" width="220"></el-table-column>
        <el-table-column property="fauNumber" label="断层编号" width="220"></el-table-column>
        <el-table-column property="fauName" label="断层名称" width="400"></el-table-column>
        <el-table-column property="fauDirection" label="断层走向[度]" width="200"></el-table-column>
      </el-table>
      <!--次生灾害危险源（危化企业）-->
      <el-table v-if="selectId!=null && selectType=='次生灾害危险源（危化企业）'" ref="multipleTable"
                :data="selectDataResult" tooltip-effect="dark" height="150px"
                :header-cell-style="{textAlign:'center'}" :cell-style="{textAlign:'center'}">
        <el-table-column property="province" label="省" width="160"></el-table-column>
        <el-table-column property="city" label="市" width="160"></el-table-column>
        <el-table-column property="county" label="区（县）" width="160"></el-table-column>
        <!--<el-table-column property="redId" label="Id" width="220"></el-table-column>-->
        <el-table-column property="redLongitude" label="经度" width="160"></el-table-column>
        <el-table-column property="redLatitude" label="纬度" width="160"></el-table-column>
        <el-table-column property="redName" label="企业名" width="200"></el-table-column>
        <el-table-column property="redAddress" label="地址" width="300"></el-table-column>
        <el-table-column property="redType" label="危化品类型" width="400"></el-table-column>
        <el-table-column property="redScale" label="规模" width="400"></el-table-column>
        <el-table-column property="redRiskgrade" label="风险等级" width="200"></el-table-column>
        <el-table-column property="sfzdyh" label="是否重点隐患" width="200">
          <template #default="scope">
            <span>{{ sfzdyhDictData(scope.row.sfzdyh) }}</span>
          </template>
        </el-table-column>
      </el-table>
      <!--次生灾害危险源（加油站）-->
      <el-table v-if="selectId!=null && selectType=='次生灾害危险源（加油站）'" ref="multipleTable"
                :data="selectDataResult" tooltip-effect="dark" height="150px"
                :header-cell-style="{textAlign:'center'}" :cell-style="{textAlign:'center'}">
        <el-table-column property="province" label="省" width="160"></el-table-column>
        <el-table-column property="city" label="市" width="160"></el-table-column>
        <el-table-column property="county" label="区（县）" width="160"></el-table-column>
        <!--<el-table-column property="gsId" label="Id" width="220"></el-table-column>-->
        <el-table-column property="gsLongitude" label="经度" width="160"></el-table-column>
        <el-table-column property="gsLatitude" label="纬度" width="160"></el-table-column>
        <el-table-column property="gsName" label="名称" width="200"></el-table-column>
        <el-table-column property="gsAddress" label="地址" width="300"></el-table-column>
        <el-table-column property="gsScale" label="规模" width="160"></el-table-column>
        <el-table-column property="gsRiskgrade" label="风险等级" width="160"></el-table-column>
        <el-table-column property="sfzdyh" label="是否重点隐患" width="200">
          <template #default="scope">
            <span>{{ sfzdyhDictData(scope.row.sfzdyh) }}</span>
          </template>
        </el-table-column>
      </el-table>
      <!--应急避难场所-->
      <el-table v-if="selectId!=null && selectType=='应急避难场所'" ref="multipleTable"
                :data="selectDataResult" tooltip-effect="dark" height="150px"
                :header-cell-style="{textAlign:'center'}" :cell-style="{textAlign:'center'}">
        <el-table-column property="province" label="省" width="160"></el-table-column>
        <el-table-column property="city" label="市" width="160"></el-table-column>
        <el-table-column property="county" label="区（县）" width="160"></el-table-column>
        <!--<el-table-column property="esId" label="Id" width="220"></el-table-column>-->
        <el-table-column property="esLongitude" label="经度" width="160"></el-table-column>
        <el-table-column property="esLatitude" label="纬度" width="160"></el-table-column>
        <el-table-column property="esName" label="名称" width="250"></el-table-column>
        <el-table-column property="esType" label="类型" width="160"></el-table-column>
        <el-table-column property="esAddress" label="具体地址" width="250"></el-table-column>
        <el-table-column property="esMaxpeople" label="可容纳人数" width="160"></el-table-column>
        <el-table-column property="esEmergencysupportequipment" label="有无应急保障设备" width="160"></el-table-column>
      </el-table>
      <!--医院-->
      <el-table v-if="selectId!=null && selectType=='医院'" ref="multipleTable"
                :data="selectDataResult" tooltip-effect="dark" height="150px"
                :header-cell-style="{textAlign:'center'}" :cell-style="{textAlign:'center'}">
        <el-table-column property="province" label="省" width="160"></el-table-column>
        <el-table-column property="city" label="市" width="160"></el-table-column>
        <el-table-column property="county" label="区（县）" width="160"></el-table-column>
        <!--<el-table-column property="dhId" label="Id" width="220"></el-table-column>-->
        <el-table-column property="dhLongitude" label="经度" width="160"></el-table-column>
        <el-table-column property="dhLatitude" label="纬度" width="160"></el-table-column>
        <el-table-column property="dhName" label="名称" width="200"></el-table-column>
        <el-table-column property="dhType" label="类型" width="160"></el-table-column>
        <el-table-column property="dhPower" label="医疗力量（人数）" width="160"></el-table-column>
        <el-table-column property="dhBedNum" label="床位数" width="160"></el-table-column>
        <el-table-column property="dhAddress" label="地址" width="200"></el-table-column>
      </el-table>
      <!--房屋抗震能力分区图-->
      <el-table v-if="selectId!=null && selectType=='房屋抗震能力分区图'" ref="multipleTable"
                :data="selectDataResult" tooltip-effect="dark" height="150px"
                :header-cell-style="{textAlign:'center'}" :cell-style="{textAlign:'center'}">
        <!--<el-table-column property="kztNumber" label="Id" width="220"></el-table-column>-->
        <el-table-column property="province" label="省" width="160"></el-table-column>
        <el-table-column property="city" label="市" width="160"></el-table-column>
        <!--<el-table-column property="county" label="区（县）" width="220"></el-table-column>-->
        <el-table-column property="kztCounties" label="区（县）" width="200"></el-table-column>
        <el-table-column property="kztStreet" label="街道、乡镇" width="200"></el-table-column>
        <el-table-column property="kztVillage" label="村、社区" width="200"></el-table-column>
        <el-table-column property="kztShockresistance" label="抗震能力初判结果" width="200"></el-table-column>
        <el-table-column property="kztShockresistancenumber" label="当前抗震能力下房屋栋数" width="200"></el-table-column>
        <el-table-column property="kztArea" label="面积" width="160"></el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script setup name="earthquakeInfluenceflied">
//地图
import BaseDataLayerMap from '@/map/components/baseDataLayer/map.vue';
//基础数据
import { getAllAreaData, getAreaDataById,
  getAllSlopeData, getSlopeDataById,
  getAllElevationData, getElevationDataById,
  getAllPbeData, getPbeDataById,
  getAllRoadData, getRoadDataById,
  getAllAirportData, getAirportDataById,
  getAllReservoirData, getReservoirDataById,
  getAllSchoolData, getSchoolDataById,
  getAllGeologicalData, getGeologicalDataById,
  getAllFaultageData, getFaultageDataById,
  getAllRiskEnterpriseData, getRiskEnterpriseDataById,
  getAllGasstationData, getGasstationDataById,
  getAllEmergencyShelterData, getEmergencyShelterDataById,
  getAllHospitalData, getHospitalDataById,
  getAllKangZhenTuData, getKangZhenTuDataById,
} from "@/api/basedatamanage/spaceData";

const props = defineProps({
  map: {//地图对象
    default: null,
    type: Object,
  },
  selectFeatureProperties: {//选中的地图要素的属性
    default: {},
    type: Object,
  },
  clickCoordinate: {//地图选中的经纬度
    default: [],
    type: Array,
  },
  showHideBaseDataLayerDivBool: {//是否显示基础数据图层选择控件
    default: false,
    type: Boolean,
  },
  taskDistrict: {//任务地区（省-市-区县、）
    default: "",
    type: String,
  },
});

const { map,selectFeatureProperties,clickCoordinate,showHideBaseDataLayerDivBool,taskDistrict } = toRefs(props);

//const emits = defineEmits();
//emits("queryGroup", groupObj.value);

const loading = ref(false);

//初始化数据
const data = reactive({
  layerDataQueryParams: {//基础数据查询参数
    province: "",
    city: "",
    county: "",
    dataType: "",//数据类型
  },
});
let {
  layerDataQueryParams,
} = toRefs(data);

//获取任务地区的省份信息
watch(() => props.taskDistrict, val => {
  if (val) {
    let province = "";
    if(val){
      if(val.indexOf("、")!=-1){//多个省份
        let array = val.split("、");
        for(let i=0;i<array.length;i++){
          let temp = array[i];
          if(temp){
            if(temp.indexOf("-")!=-1){
              province += temp.split("-")[0] + ";";
            }else{
              province += temp + ";";
            }
          }
        }
      }else{//单个省份
        if(val.indexOf("-")!=-1){
          province += val.split("-")[0];
        }else{
          province += val;
        }
      }
    }
    layerDataQueryParams.value.province = province;
  }
}, { deep: true, immediate: true });

//基础数据----start
const showHideLegendDivBool = ref(true);//是否显示图例面板
const showHideTextLayerBool = ref(false);//是否显示文字图层
const baseDataLayerSelectData = ref([]);//基础数据图层选择内容
const baseDataLayerProps = ref({ multiple: true });//基础数据图层选择--多选
//基础数据图层显示
const xzqhLayerBool = ref(false);//行政区划图层显示
const dxdmGcLayerBool = ref(false);//地形地貌（高程）图层显示
const dxdmPdLayerBool = ref(false);//地形地貌（坡度）图层显示
const rkgwLayerBool = ref(false);//人口建筑物经济公里格网图层显示
const jtDlLayerBool = ref(false);//交通（道路）图层显示
const jtJcLayerBool = ref(false);//交通（机场）图层显示
const skLayerBool = ref(false);//水库图层显示
const schoolLayerBool = ref(false);//学校图层显示
const dzzhLayerBool = ref(false);//地质灾害图层显示
const dcLayerBool = ref(false);//断层图层显示
const csWhqyLayerBool = ref(false);//次生灾害危险源（危化企业）图层显示
const csJyzLayerBool = ref(false);//次生灾害危险源（加油站）图层显示
const yjbncsLayerBool = ref(false);//应急避难场所图层显示
const hospitalLayerBool = ref(false);//医院图层显示
const fwkznlLayerBool = ref(false);//房屋抗震能力分区图图层显示
//基础数据图层数据
const xzqhAllData = ref([]);//行政区划图层数据
const dxdmGcAllData = ref([]);//地形地貌（高程）图层数据
const dxdmPdAllData = ref([]);//地形地貌（坡度）图层数据
const rkgwAllData = ref([]);//人口建筑物经济公里格网图层数据
const jtDlAllData = ref([]);//交通（道路）图层数据
const jtJcAllData = ref([]);//交通（机场）图层数据
const skAllData = ref([]);//水库图层数据
const schoolAllData = ref([]);//学校图层数据
const dzzhAllData = ref([]);//地质灾害图层数据
const dcAllData = ref([]);//断层图层数据
const csWhqyAllData = ref([]);//次生灾害危险源（危化企业）图层数据
const csJyzAllData = ref([]);//次生灾害危险源（加油站）图层数据
const yjbncsAllData = ref([]);//应急避难场所图层数据
const hospitalAllData = ref([]);//医院图层数据
const fwkznlAllData = ref([]);//房屋抗震能力分区图图层数据
//基础数据人口建筑物经济公里格网图例选择
const rkgwLegendBool = ref(false);//是否显示人口建筑物经济公里格网图例
const rkgwLegendSelectData = ref([]);//人口建筑物经济公里格网图例传参
const rkgwLegendRadio = ref("0");//人口/建筑物/经济
//基础数据选中查看详情数据
const baseDataDetailTable = ref(false);//是否显示基础数据下方查看详情面板
const selectId = ref(null);//选中查看详情数据Id
const selectType = ref("");//选中查看详情数据类型
const selectDataResult = ref([]);//选中查看详情数据
//基础数据图层选择
const baseDataLayerOptions = ref([
  { value: '行政区划', label: '行政区划' },
  {
    value: '地形地貌',
    label: '地形地貌',
    children: [{
      value: '高程',
      label: '高程'
    }, {
      value: '坡度',
      label: '坡度',
    }]
  },
  { value: '人口建筑物经济公里格网', label: '人口建筑物经济公里格网' },
  {
    value: '交通',
    label: '交通',
    children: [{
      value: '道路',
      label: '道路'
    }, {
      value: '机场',
      label: '机场',
    }]
  },
  { value: '水库', label: '水库' },
  { value: '学校', label: '学校' },
  { value: '地质灾害', label: '地质灾害' },
  { value: '断层', label: '断层' },
  {
    value: '次生灾害危险源',
    label: '次生灾害危险源',
    children: [{
      value: '危化企业',
      label: '危化企业'
    }, {
      value: '加油站',
      label: '加油站',
    }]
  },
  { value: '应急避难场所', label: '应急避难场所' },
  { value: '医院', label: '医院' },
  { value: '房屋抗震能力分区图', label: '房屋抗震能力分区图' }
]);//基础数据图层选择--多选
//人口格网图例范围
const rkgwLegendData1 = ref([
  {code:"0",name:"0-30",color:"rgba(0,255,0,0.1)"},
  {code:"1",name:"31-100",color:"rgba(0,255,0,0.2)"},
  {code:"2",name:"101-200",color:"rgba(0,255,0,0.3)"},
  {code:"3",name:"201-400",color:"rgba(0,255,0,0.4)"},
  {code:"4",name:"401-800",color:"rgba(0,255,0,0.5)"},
  {code:"5",name:"801-1600",color:"rgba(0,255,0,0.6)"},
  {code:"6",name:"1601-5000",color:"rgba(0,255,0,0.7)"},
  {code:"7",name:"5001-25000",color:"rgba(0,255,0,0.8)"},
  {code:"8",name:"25000以上",color:"rgba(0,255,0,0.9)"},
]);
//建筑物格网图例范围
const rkgwLegendData2 = ref([
  {code:"0",name:"0-30",color:"rgba(255,0,0,0.1)"},
  {code:"1",name:"30-60",color:"rgba(255,0,0,0.2)"},
  {code:"2",name:"60-100",color:"rgba(255,0,0,0.3)"},
  {code:"3",name:"100-600",color:"rgba(255,0,0,0.4)"},
  {code:"4",name:"600-1200",color:"rgba(255,0,0,0.5)"},
  {code:"5",name:"1200-1600",color:"rgba(255,0,0,0.6)"},
  {code:"6",name:"1600-5000",color:"rgba(255,0,0,0.7)"},
  {code:"7",name:"5000-15000",color:"rgba(255,0,0,0.8)"},
  {code:"8",name:"15000以上",color:"rgba(255,0,0,0.9)"},
]);
//经济格网图例范围
const rkgwLegendData3 = ref([
  {code:"0",name:"0-30",color:"rgba(0,0,255,0.1)"},
  {code:"1",name:"30-60",color:"rgba(0,0,255,0.2)"},
  {code:"2",name:"60-100",color:"rgba(0,0,255,0.3)"},
  {code:"3",name:"100-600",color:"rgba(0,0,255,0.4)"},
  {code:"4",name:"600-1200",color:"rgba(0,0,255,0.5)"},
  {code:"5",name:"1200-1600",color:"rgba(0,0,255,0.6)"},
  {code:"6",name:"1600-5000",color:"rgba(0,0,255,0.7)"},
  {code:"7",name:"5000-15000",color:"rgba(0,0,255,0.8)"},
  {code:"8",name:"15000以上",color:"rgba(0,0,255,0.9)"},
]);

const elevationLegendBool = ref(false);//是否显示高程图例
//高程图例范围
const elevationLegendData = ref([
  {code:"0",name:"0-100",color:"rgba(0,0,255,0.1)"},
  {code:"1",name:"100-300",color:"rgba(0,0,255,0.2)"},
  {code:"2",name:"300-700",color:"rgba(0,0,255,0.3)"},
  {code:"3",name:"700-1000",color:"rgba(0,0,255,0.4)"},
  {code:"4",name:"1000-1500",color:"rgba(0,0,255,0.5)"},
  {code:"5",name:"1500-2000",color:"rgba(0,0,255,0.6)"},
  {code:"6",name:"2000-2500",color:"rgba(0,0,255,0.7)"},
  {code:"7",name:"2500-3000",color:"rgba(255,0,0,0.2)"},
  {code:"8",name:"3000-3500",color:"rgba(255,0,0,0.3)"},
  {code:"9",name:"3500-4000",color:"rgba(255,0,0,0.4)"},
  {code:"10",name:"4000-4500",color:"rgba(255,0,0,0.5)"},
  {code:"11",name:"4500-5000",color:"rgba(255,0,0,0.6)"},
  {code:"12",name:"5000以上",color:"rgba(255,0,0,0.7)"},
]);

const slopeLegendBool = ref(false);//是否显示坡度图例
//坡度图例范围
const slopeLegendData = ref([
  {code:"0",name:"0-2",color:"rgba(128,246,0,0.7)"},
  {code:"1",name:"2-6",color:"rgba(255,255,0,0.7)"},
  {code:"2",name:"6-15",color:"rgba(255,203,0,0.7)"},
  {code:"3",name:"15-25",color:"rgba(255,115,0,0.7)"},
  {code:"4",name:"25-35",color:"rgb(255,80,0,0.7)"},
  {code:"5",name:"35以上",color:"rgba(255,0,0,0.7)"},
]);
//基础数据----end

//地图传参--start
//根据基础数据ID显示查询详情修改面板
const showBaseDataDetailId = (array)=>{
  if(array!=null && array.length==2){
    let id = array[0];
    let dataType = array[1];
    //根据id查询数据
    handleBaseDataDetail(id,dataType);
  }
}
//地图传参--end

//处理经纬度
function getLonLat(longitude,latitude){
  let lonlat = null;
  if(longitude!=null && latitude!=null && longitude!="" && latitude!=""){
    let lon = Number(longitude);
    let lat = Number(latitude);
    if(lon>0 && lon<180 && lat>0 && lat<90){
      lonlat = [lon,lat];
    }
  }

  return lonlat;
}

//基础数据--勾选图层事件
function chooseBaseDataLayers(){
  console.log("勾选图层事件");
  console.log(baseDataLayerSelectData.value);
  let tempArray = ["行政区划","高程","坡度","人口建筑物经济公里格网","道路","机场","水库","学校","地质灾害","断层","危化企业","加油站","应急避难场所","医院","房屋抗震能力分区图"];
  let indexArray = [];
  let array = baseDataLayerSelectData.value;
  if(array.length>0){
    for(let i=0;i<array.length;i++){
      let arr = array[i];
      let name = arr[0];
      if(arr.length==2){
        name = arr[1];
      }
      let index = tempArray.indexOf(name);
      indexArray.push(index);//设置勾选的数组序号
    }
  }
  console.log(indexArray);
  for(let i=0;i<tempArray.length;i++){
    let layerName = tempArray[i];
    let bool = false;
    if(indexArray.indexOf(i)!=-1){//是否勾选
      bool = true;
    }
    let queryBool = false;//是否查询图层数据
    let dataType = layerName;//数据类型
    if(layerName=="行政区划"){
      //未勾选
      if(bool==false){
        //清空图层数据
        xzqhAllData.value = [];
      }else if(xzqhLayerBool.value==false){
        queryBool = true;
      }
      xzqhLayerBool.value = bool;
    }else if(layerName=="高程"){//地形地貌（高程）
      dataType = "地形地貌（高程）";//数据类型
      //未勾选
      if(bool==false){
        //清空图层数据
        dxdmGcAllData.value = [];
        elevationLegendBool.value = false;//隐藏高程图例
      }else if(dxdmGcLayerBool.value==false){
        queryBool = true;
      }
      dxdmGcLayerBool.value = bool;
    }else if(layerName=="坡度"){//地形地貌（坡度）
      dataType = "地形地貌（坡度）";//数据类型
      //未勾选
      if(bool==false){
        //清空图层数据
        dxdmPdAllData.value = [];
        slopeLegendBool.value = false;//隐藏坡度图例
      }else if(dxdmPdLayerBool.value==false){
        queryBool = true;
      }
      dxdmPdLayerBool.value = bool;
    }else if(layerName=="人口建筑物经济公里格网"){
      //未勾选
      if(bool==false){
        //清空图层数据
        rkgwAllData.value = [];
      }else if(rkgwLayerBool.value==false){
        queryBool = true;
      }
      rkgwLayerBool.value = bool;
    }else if(layerName=="道路"){//交通（道路）
      dataType = "交通（道路）";//数据类型
      //未勾选
      if(bool==false){
        //清空图层数据
        jtDlAllData.value = [];
      }else if(jtDlLayerBool.value==false){
        queryBool = true;
      }
      jtDlLayerBool.value = bool;
    }else if(layerName=="机场"){//交通（机场）
      dataType = "交通（机场）";//数据类型
      //未勾选
      if(bool==false){
        //清空图层数据
        jtJcAllData.value = [];
      }else if(jtJcLayerBool.value==false){
        queryBool = true;
      }
      jtJcLayerBool.value = bool;
    }else if(layerName=="水库"){
      //未勾选
      if(bool==false){
        //清空图层数据
        skAllData.value = [];
      }else if(skLayerBool.value==false){
        queryBool = true;
      }
      skLayerBool.value = bool;
    }else if(layerName=="学校"){
      //未勾选
      if(bool==false){
        //清空图层数据
        schoolAllData.value = [];
      }else if(schoolLayerBool.value==false){
        queryBool = true;
      }
      schoolLayerBool.value = bool;
    }else if(layerName=="地质灾害"){
      //未勾选
      if(bool==false){
        //清空图层数据
        dzzhAllData.value = [];
      }else if(dzzhLayerBool.value==false){
        queryBool = true;
      }
      dzzhLayerBool.value = bool;
    }else if(layerName=="断层"){
      //未勾选
      if(bool==false){
        //清空图层数据
        dcAllData.value = [];
      }else if(dcLayerBool.value==false){
        queryBool = true;
      }
      dcLayerBool.value = bool;
    }else if(layerName=="危化企业"){//次生灾害危险源（危化企业）
      dataType = "次生灾害危险源（危化企业）";//数据类型
      //未勾选
      if(bool==false){
        //清空图层数据
        csWhqyAllData.value = [];
      }else if(csWhqyLayerBool.value==false){
        queryBool = true;
      }
      csWhqyLayerBool.value = bool;
    }else if(layerName=="加油站"){//次生灾害危险源（加油站）
      dataType = "次生灾害危险源（加油站）";//数据类型
      //未勾选
      if(bool==false){
        //清空图层数据
        csJyzAllData.value = [];
      }else if(csJyzLayerBool.value==false){
        queryBool = true;
      }
      csJyzLayerBool.value = bool;
    }else if(layerName=="应急避难场所"){
      //未勾选
      if(bool==false){
        //清空图层数据
        yjbncsAllData.value = [];
      }else if(yjbncsLayerBool.value==false){
        queryBool = true;
      }
      yjbncsLayerBool.value = bool;
    }else if(layerName=="医院"){
      //未勾选
      if(bool==false){
        //清空图层数据
        hospitalAllData.value = [];
      }else if(hospitalLayerBool.value==false){
        queryBool = true;
      }
      hospitalLayerBool.value = bool;
    }else if(layerName=="房屋抗震能力分区图"){
      //未勾选
      if(bool==false){
        //清空图层数据
        fwkznlAllData.value = [];
      }else if(fwkznlLayerBool.value==false){
        queryBool = true;
      }
      fwkznlLayerBool.value = bool;
    }
    //是否查询图层数据
    if(queryBool){
      //查询基础数据图层数据
      queryBaseDataLayerData(dataType);
    }
  }
}

//查询基础数据图层数据
function queryBaseDataLayerData(dataType){
  loading.value = true;
  layerDataQueryParams.value.dataType = dataType;//数据类型
  //省级数据
  if(dataType=="行政区划"){
    console.log(dataType);
    getAllAreaData(layerDataQueryParams.value).then((response) => {
      nextTick(() => {
        console.log(response.data);
        xzqhAllData.value = response.data.rows;
        loading.value = false;
      });
    }).catch(err => {
      loading.value = false;
    });
  }else if(dataType=="地形地貌（高程）"){//地形地貌（高程）
    console.log(dataType);
    getAllElevationData(layerDataQueryParams.value).then((response) => {
      nextTick(() => {
        console.log(response.data);
        dxdmGcAllData.value = response.data.rows;
        loading.value = false;
      });
    }).catch(err => {
      loading.value = false;
    });
  }else if(dataType=="地形地貌（坡度）"){//地形地貌（坡度）
    console.log(dataType);
    getAllSlopeData(layerDataQueryParams.value).then((response) => {
      nextTick(() => {
        console.log(response.data);
        dxdmPdAllData.value = response.data.rows;
        loading.value = false;
      });
    }).catch(err => {
      loading.value = false;
    });
  }else if(dataType=="人口建筑物经济公里格网"){
    console.log(dataType);
    getAllPbeData(layerDataQueryParams.value).then((response) => {
      nextTick(() => {
        console.log(response.data);
        rkgwAllData.value = response.data.rows;
        loading.value = false;
      });
    }).catch(err => {
      loading.value = false;
    });
  }else if(dataType=="交通（道路）"){//交通（道路）
    console.log(dataType);
    getAllRoadData(layerDataQueryParams.value).then((response) => {
      nextTick(() => {
        console.log(response.data);
        jtDlAllData.value = response.data.rows;
        loading.value = false;
      });
    }).catch(err => {
      loading.value = false;
    });
  }else if(dataType=="交通（机场）"){//交通（机场）
    console.log(dataType);
    getAllAirportData(layerDataQueryParams.value).then((response) => {
      nextTick(() => {
        console.log(response.data);
        jtJcAllData.value = response.data.rows;
        loading.value = false;
      });
    }).catch(err => {
      loading.value = false;
    });
  }else if(dataType=="水库"){
    console.log(dataType);
    getAllReservoirData(layerDataQueryParams.value).then((response) => {
      nextTick(() => {
        console.log(response.data);
        skAllData.value = response.data.rows;
        loading.value = false;
      });
    }).catch(err => {
      loading.value = false;
    });
  }else if(dataType=="学校"){
    console.log(dataType);
    getAllSchoolData(layerDataQueryParams.value).then((response) => {
      nextTick(() => {
        console.log(response.data);
        schoolAllData.value = response.data.rows;
        loading.value = false;
      });
    }).catch(err => {
      loading.value = false;
    });
  }else if(dataType=="地质灾害"){
    console.log(dataType);
    getAllGeologicalData(layerDataQueryParams.value).then((response) => {
      nextTick(() => {
        console.log(response.data);
        dzzhAllData.value = response.data.rows;
        loading.value = false;
      });
    }).catch(err => {
      loading.value = false;
    });
  }else if(dataType=="断层"){
    console.log(dataType);
    getAllFaultageData(layerDataQueryParams.value).then((response) => {
      nextTick(() => {
        console.log(response.data);
        dcAllData.value = response.data.rows;
        loading.value = false;
      });
    }).catch(err => {
      loading.value = false;
    });
  }else if(dataType=="次生灾害危险源（危化企业）"){//次生灾害危险源（危化企业）
    console.log(dataType);
    getAllRiskEnterpriseData(layerDataQueryParams.value).then((response) => {
      nextTick(() => {
        console.log(response.data);
        csWhqyAllData.value = response.data.rows;
        loading.value = false;
      });
    }).catch(err => {
      loading.value = false;
    });
  }else if(dataType=="次生灾害危险源（加油站）"){//次生灾害危险源（加油站）
    console.log(dataType);
    getAllGasstationData(layerDataQueryParams.value).then((response) => {
      nextTick(() => {
        console.log(response.data);
        csJyzAllData.value = response.data.rows;
        loading.value = false;
      });
    }).catch(err => {
      loading.value = false;
    });
  }else if(dataType=="应急避难场所"){
    console.log(dataType);
    getAllEmergencyShelterData(layerDataQueryParams.value).then((response) => {
      nextTick(() => {
        console.log(response.data);
        yjbncsAllData.value = response.data.rows;
        loading.value = false;
      });
    }).catch(err => {
      loading.value = false;
    });
  }else if(dataType=="医院"){
    console.log(dataType);
    getAllHospitalData(layerDataQueryParams.value).then((response) => {
      nextTick(() => {
        console.log(response.data);
        hospitalAllData.value = response.data.rows;
        loading.value = false;
      });
    }).catch(err => {
      loading.value = false;
    });
  }else if(dataType=="房屋抗震能力分区图"){
    console.log(dataType);
    getAllKangZhenTuData(layerDataQueryParams.value).then((response) => {
      nextTick(() => {
        console.log(response.data);
        fwkznlAllData.value = response.data.rows;
        loading.value = false;
      });
    }).catch(err => {
      loading.value = false;
    });
  }
}

//根据id查询基础数据
function handleBaseDataDetail(id,dataType){
  console.log(id);
  selectId.value = id;//选中查看详情数据Id
  selectType.value = dataType;//选中查看详情数据类型
  selectDataResult.value = null;//清空
  //选中查看详情数据
  if(dataType=="行政区划"){
    getAreaDataById(id).then((response) => {
      nextTick(() => {
        console.log(response.data);
        selectDataResult.value = response.data.rows;
        console.log("选中查看详情数据");
        console.log(selectDataResult.value);
        baseDataDetailTable.value = true;//打开下方查看详情面板
      });
    });
  }else if(dataType=="地形地貌（高程）"){//地形地貌（高程）


  }else if(dataType=="地形地貌（坡度）"){//地形地貌（坡度）


  }else if(dataType=="人口建筑物经济公里格网"){
    getPbeDataById(id).then((response) => {
      nextTick(() => {
        console.log(response.data);
        selectDataResult.value = response.data.rows;
        console.log("选中查看详情数据");
        console.log(selectDataResult.value);
        baseDataDetailTable.value = true;//打开下方查看详情面板
      });
    });

  }else if(dataType=="交通（道路）"){//交通（道路）
    getRoadDataById(id).then((response) => {
      nextTick(() => {
        console.log(response.data);
        selectDataResult.value = response.data.rows;
        console.log("选中查看详情数据");
        console.log(selectDataResult.value);
        baseDataDetailTable.value = true;//打开下方查看详情面板
      });
    });

  }else if(dataType=="交通（机场）"){//交通（机场）
    getAirportDataById(id).then((response) => {
      nextTick(() => {
        console.log(response.data);
        selectDataResult.value = response.data.rows;
        console.log("选中查看详情数据");
        console.log(selectDataResult.value);
        baseDataDetailTable.value = true;//打开下方查看详情面板
      });
    });

  }else if(dataType=="水库"){
    getReservoirDataById(id).then((response) => {
      nextTick(() => {
        console.log(response.data);
        selectDataResult.value = response.data.rows;
        console.log("选中查看详情数据");
        console.log(selectDataResult.value);
        baseDataDetailTable.value = true;//打开下方查看详情面板
      });
    });


  }else if(dataType=="学校"){
    getSchoolDataById(id).then((response) => {
      nextTick(() => {
        console.log(response.data);
        selectDataResult.value = response.data.rows;
        console.log("选中查看详情数据");
        console.log(selectDataResult.value);
        baseDataDetailTable.value = true;//打开下方查看详情面板
      });
    });

  }else if(dataType=="地质灾害"){
    getGeologicalDataById(id).then((response) => {
      nextTick(() => {
        console.log(response.data);
        selectDataResult.value = response.data.rows;
        console.log("选中查看详情数据");
        console.log(selectDataResult.value);
        baseDataDetailTable.value = true;//打开下方查看详情面板
      });
    });

  }else if(dataType=="断层"){
    getFaultageDataById(id).then((response) => {
      nextTick(() => {
        console.log(response.data);
        selectDataResult.value = response.data.rows;
        console.log("选中查看详情数据");
        console.log(selectDataResult.value);
        baseDataDetailTable.value = true;//打开下方查看详情面板
      });
    });

  }else if(dataType=="次生灾害危险源（危化企业）"){//次生灾害危险源（危化企业）
    getRiskEnterpriseDataById(id).then((response) => {
      nextTick(() => {
        console.log(response.data);
        selectDataResult.value = response.data.rows;
        console.log("选中查看详情数据");
        console.log(selectDataResult.value);
        baseDataDetailTable.value = true;//打开下方查看详情面板
      });
    });

  }else if(dataType=="次生灾害危险源（加油站）"){//次生灾害危险源（加油站）
    getGasstationDataById(id).then((response) => {
      nextTick(() => {
        console.log(response.data);
        selectDataResult.value = response.data.rows;
        console.log("选中查看详情数据");
        console.log(selectDataResult.value);
        baseDataDetailTable.value = true;//打开下方查看详情面板
      });
    });

  }else if(dataType=="应急避难场所"){
    getEmergencyShelterDataById(id).then((response) => {
      nextTick(() => {
        console.log(response.data);
        selectDataResult.value = response.data.rows;
        console.log("选中查看详情数据");
        console.log(selectDataResult.value);
        baseDataDetailTable.value = true;//打开下方查看详情面板
      });
    });

  }else if(dataType=="医院"){
    getHospitalDataById(id).then((response) => {
      nextTick(() => {
        console.log(response.data);
        selectDataResult.value = response.data.rows;
        console.log("选中查看详情数据");
        console.log(selectDataResult.value);
        baseDataDetailTable.value = true;//打开下方查看详情面板
      });
    });

  }else if(dataType=="房屋抗震能力分区图"){
    getKangZhenTuDataById(id).then((response) => {
      nextTick(() => {
        console.log(response.data);
        selectDataResult.value = response.data.rows;
        console.log("选中查看详情数据");
        console.log(selectDataResult.value);
        baseDataDetailTable.value = true;//打开下方查看详情面板
      });
    });
  }
}

//关闭基础数据查看详情面板
function closeBaseDataDetailResultDiv(){
  baseDataDetailTable.value = false;//关闭基础数据下方查看详情面板
}

//人口建筑物经济公里格网图例选择事件
function rkgwLegendRadioSelect(){
  let value = rkgwLegendRadio.value;
  if(value=="1"){//人口
    rkgwLegendSelectData.value = ["人口",rkgwLegendData1.value];
  }else if(value=="2"){//建筑物
    rkgwLegendSelectData.value = ["建筑物",rkgwLegendData2.value];
  }else if(value=="3"){//经济
    rkgwLegendSelectData.value = ["经济",rkgwLegendData3.value];
  }
}

//人口建筑物经济公里格网图例鼠标悬浮事件
function rkgwLegendMouseOver(){
  rkgwLegendBool.value = true;
  elevationLegendBool.value = false;//隐藏高程图例
  slopeLegendBool.value = false;//隐藏坡度图例
}

//显示隐藏基础数据图例面板
function showHideLegendDiv(){
  if(showHideLegendDivBool.value){
    showHideLegendDivBool.value = false;//显示图例面板
  }else{
    showHideLegendDivBool.value = true;//隐藏图例面板
    rkgwLegendBool.value = false;//隐藏人口建筑物经济公里格网图例
    elevationLegendBool.value = false;//隐藏高程图例
    slopeLegendBool.value = false;//隐藏坡度图例
  }
}

//显示隐藏基础数据文字图层
function showHideTextLayer(){
  if(showHideTextLayerBool.value){
    showHideTextLayerBool.value = false;//隐藏文字图层
  }else{
    showHideTextLayerBool.value = true;//显示文字图层
  }
}

//高程图例鼠标悬浮事件
function elevationLegendMouseOver(){
  elevationLegendBool.value = true;//显示高程图例
  slopeLegendBool.value = false;//隐藏坡度图例
  rkgwLegendBool.value = false;//隐藏人口建筑物经济公里格网图例
}

//坡度图例鼠标悬浮事件
function slopeLegendMouseOver(){
  slopeLegendBool.value = true;//显示坡度图例
  elevationLegendBool.value = false;//隐藏高程图例
  rkgwLegendBool.value = false;//隐藏人口建筑物经济公里格网图例
}

//使用回显数据字典的方法
const sfzdyhDictData = (value) => {
  //是否重点隐患-字典格式
  let zidian = [
    { value:1, label:'是' },
    { value:0, label:'否' }
  ];
  for(let i=0;i<zidian.length;i++){
    if(zidian[i].value==value){
      value = zidian[i].label;
    }
  }
  return value;
}

</script>
<style scoped lang="scss">
/*基础数据图层选择面板*/
.new-layerSelectDiv {
  position: absolute;
  top: 170px;
  left: 99px;
  width: 256px;
  height: 70px;
  background: #fff;
  box-shadow: 0px 0px 20px rgb(0 0 0 / 20%);
  border: 1px solid #707070;
  border-radius: 4px;
  padding: 18px;
  padding-right: 0px;
}
/*基础数据图例文字工具栏*/
.new-layerLegendDiv {
  position: absolute;
  top:140px;
  right:10px;
  width: 54px;
  height: 150px;
  background: #fff;
  box-shadow: 0px 0px 20px rgba(0,0,0,0.2);
  border:1px solid #707070;
  border-radius: 4px;
  cursor:pointer;
}
.new-layerLegendDiv p {
  padding: 10px;
  margin:0px;
}
.new-layerLegendDiv p img {
  width:25px;
  height:25px;
  margin-left: 3px;
}
.new-layerLegendDiv p span {
  width:32px;
  height:21px;
  font-size: 14px;
  color:#3a385e;
  text-align:center;
  line-height:24px;
  border:0.5px solid #f5f5f5;
}
.new-layerLengendDiv-split {
  width: 32px!important;
  height: 1px!important;
  padding: 0px!important;
  margin: 0px!important;
  margin-left: 10px!important;
  border-top: 1px dashed #6f7ea8;
}
/*基础数据图例*/
.new-legendDiv {
  position: absolute;
  top: 140px;
  right: 70px;
  width: 256px;
  background: #fff;
  box-shadow: 0px 0px 20px rgb(0 0 0 / 20%);
  border: 1px solid #707070;
  border-radius: 4px;
  padding: 5px;
}
.new-legendDiv div {
  position: relative;
  height: 16px;
  line-height: 16px;
  font-size: 13px;
  margin: 8px;
}
.new-legendDiv div span {
  line-height: 16px;
  font-size: 13px;
}
.new-legendDiv div div {
  position: relative;
  top: 2px;
  left: 8px;
  width: 30px;
  height: 14px;
  margin: 0px !important;
  margin-right: 25px !important;
  display: inline-block;
}
/*面*/
.new-legendDiv-polygon {
  position: relative !important;
  left: 0px !important;
  top: 0px !important;
  border:1px solid black;
  background:#fff;
}
/*线*/
.new-legendDiv-line {
  position: relative !important;
  height: 5px !important;
  top: -4px !important;
  left: 0px !important;
}
/*点*/
.new-legendDiv-point {
  position: relative !important;
  left: 8px !important;
  top: 0px !important;
  height: 12px !important;
  width: 12px !important;
  border-radius: 10px !important;
}
/*人口建筑物经济公里格网图例*/
.new-rkgwLegendDiv {
  position: absolute;
  top: 140px;
  right: 340px;
  /*width: 256px;*/
  background: #fff;
  box-shadow: 0px 0px 20px rgb(0 0 0 / 20%);
  border: 1px solid #707070;
  border-radius: 4px;
  padding: 5px;
}
.new-rkgwLegendDiv div {
  position: relative;
  height: 16px;
  line-height: 16px;
  font-size: 13px;
  margin: 8px;
}
.new-rkgwLegendDiv div span {
  line-height: 16px;
  font-size: 13px;
}
.new-rkgwLegendDiv div div {
  position: relative;
  top: 2px;
  left: 8px;
  width: 30px;
  height: 14px;
  margin: 0px !important;
  margin-right: 25px !important;
  display: inline-block;
}

/*基础数据下方查看详情面板*/
.new-queryResultDiv {
  position: absolute;
  left:0px;
  right:0px;
  bottom:0px;
  /*height:140px;*/
  height:200px;
  background:#fff;
  z-index: 10;
  border: 1px solid #e4e7ed;
}
.new-queryTableBtn {
  position: absolute;
  left:0px;
  right:0px;
  top:0px;
  height:50px;
  padding:10px;
}
.new-queryTableSpan{
  position: relative;
  top: -32px;
  width: 100%;
  text-align: center;
  font-weight: bold;
  font-size: 18px;
  color: var(--el-color-primary);
  display: inline-block;
  line-height: 32px;
  z-index: -1;
}
.new-queryTableDiv {
  position: absolute;
  left:0px;
  right:0px;
  top:50px;
  bottom:0px;
}
</style>